function createLi(el, content, beforeEl) {
    let li = document.createElement("li");
    let input = document.createElement("input");
    let span = document.createElement("span");

    input.setAttribute("type", "checkbox")
    span.innerText = content;
    li.appendChild(input);
    li.appendChild(span);

    el.insertBefore(li, beforeEl);
}


function init() {
    let ul = document.querySelector(".list");
    let backlogInput = document.querySelector("#backlogInput");
    backlogInput.addEventListener("keydown", function (event) {
        let li = ul.querySelectorAll("li");
        if (event.keyCode == 13) {
            createLi(ul, event.target.value, li[0]);
        }
    });



    /**
     * 使用document.createElement("li")为ul添加子节点时，由于没有办法监视到新增的子节点
     * 所以DOM操作会变得很复杂，代码垃圾，此时可以使用事件委托
     * 
     * 事件委托：依靠事件冒泡原理来实现，给需要操作的父元素绑定一个事件，根据冒泡原理，操作子元素时是会触发父元素的事件的
     * 此时，利用event.target.nodeName获取操作的子元素名字，判断如果是某个特定元素触发事件，那么就执行操作
     * 而且因为在父元素绑定事件，当有新的元素节点添加进来时，也可以获取到新元素
     * 
     * 优点：性能优化，DOM操作减少，代码量变少
     */

    // 使用事件委托完成删除操作
    ul.addEventListener("click", function (event) {
        if (event.target.nodeName.toLowerCase() === "input") {
            event.target.parentNode.remove();
        }
    });
}





window.onload = init();